<template>
  <el-image 
    :style="imageStyle"
    :src="processedUrl"
    :lazy="lazy"
    :fit="fit"
  >
    <template #placeholder>
      <div class="image-placeholder" :style="placeholderStyle">
        <el-image 
          style="width: 100%; height: 100%; filter: blur(8px);"
          :src="thumbnailUrl"
          :fit="fit"
        />
      </div>
    </template>
    <template #error>
      <div class="image-error">
        <el-icon><Picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue';
import { Picture } from '@element-plus/icons-vue';

// 定义组件接收的属性
const props = defineProps({
  src: {
    type: String,
    required: true
  },
  fit: {
    type: String,
    default: 'cover'
  },
  lazy: {
    type: Boolean,
    default: true
  },
  imageStyle: {
    type: Object,
    default: () => ({
      width: '100%',
      height: '100%'
    })
  },
  placeholderStyle: {
    type: Object,
    default: () => ({})
  },
  size: {
    type: String,
    default: 'original' // 'original' | 'thumbnail'
  },
  quality: {
    type: Number,
    default: 80
  },
  width: {
    type: Number,
    default: 0
  },
  borderRadius: {
    type: String,
    default: ''
  }
});

// 检测浏览器WebP支持
const supportsWebP = ref(false);

onMounted(() => {
  if (process.client) {
    const canvas = document.createElement('canvas');
    supportsWebP.value = canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
  }
});

// 计算处理后的URL
const processedUrl = computed(() => {
  return getOptimizedImageUrl(props.src, 'original', props.width, props.quality);
});

// 计算缩略图URL
const thumbnailUrl = computed(() => {
  return getOptimizedImageUrl(props.src, 'thumbnail');
});

// 优化的图片URL处理函数
function getOptimizedImageUrl(
  url: string, 
  size: 'original' | 'thumbnail' = 'original',
  width: number = 0,
  quality: number = 80
): string {
  if (!url) return '';
  
  // 确保使用CDN域名
  if (!url.includes('cdn.codinghou.cn')) {
    url = url.replace(/^https?:\/\/[^/]+/, 'https://cdn.codinghou.cn');
  }
  
  // 构建查询参数
  let params = [];
  
  // 添加WebP格式支持
  if (supportsWebP.value) {
    params.push('format=webp');
  }
  
  // 根据尺寸添加不同处理
  if (size === 'thumbnail') {
    // 缩略图 - 尺寸小且质量较低的模糊预览图
    params.push('x-oss-process=image/resize,w_50/quality,q_30/blur,r_3,s_2');
  } else if (width > 0) {
    // 自定义尺寸和质量
    params.push(`x-oss-process=image/resize,w_${width}/quality,q_${quality}`);
  }
  
  // 添加参数到URL
  if (params.length > 0) {
    url += (url.includes('?') ? '&' : '?') + params.join('&');
  }
  
  return url;
}
</script>

<style scoped>
.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #c0c4cc;
  font-size: 30px;
}
</style>